@import './reset.scss';
@import './nut-reset.scss';
@import './uni-reset.scss';

$main-color: #1F78FF; // 主题色
$main-rgb: 31, 120, 255; // 主题色RGB值
$main-linear-rgb: 53, 133, 255; // 主题色对应渐变RGB值
$main-color-light: #3585FE; // 主题色浅色
$main-color-end: #166BEB; // 主题色按钮选中后加深
$main-color-txt: #005AE0; // 主题色文本颜色
$bg-color: #F5F7FA; // 主背景色

$main-color-ligthen: lighten($main-color, 20%); // 主题色变浅
$main-color-darken: darken($main-color, 10%); // 主题色变深

:root,
page {
    --main-color: #{$main-color};
    --main-rgb: #{$main-rgb};
    --main-linear-rgb: #{$main-linear-rgb};
    --main-color-light: #{$main-color-light};
    --main-color-end: #{$main-color-end};
    --main-color-txt: #{$main-color-txt};
    --text-color: #1F1F1F; // 主要文字颜色
    --color-333: #333333;
    --color-666: #666666;
    --color-999: #999999;
    --bg-color: #{$bg-color};

    --nut-primary-color: #{$main-color};
    --nut-primary-color-end: #{$main-color-end};

    background-color: $bg-color;
}

// 页面主容器：container
.cntr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--safe-area-top);
    // max-width: 750rpx;
    // margin: 0 auto;
}

// 页面主容器内包裹层：wrapper
.wrapper {
    display: flex;
    flex-direction: column;
    padding: 0;
    width: 100%;
    height: 100%;
    align-items: center;
}

// 水平排列容器：row
.row {
    display: flex;
    width: 100%;
}

// 白色圆角卡片容器：card
.card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 24rpx;
    width: 100%;
    padding: 16rpx;
}

// 通用图标样式
.icon {
    width: 32rpx;
    height: 32rpx;
}